<!--
 * @Author: your name
 * @Date: 2020-03-26 09:41:08
 * @LastEditTime: 2020-03-26 09:41:10
 * @LastEditors: Please set LastEditors
 * @Description: 九鑫
 -->

<template>
  <div>
    <van-form class="hongchang">
      <van-field
        v-model="ruleForm.moblie"
        type="tel"
        maxlength="11"
        label="账号"
        placeholder="请填写账号"
        clearable
        @blur="onBlur('0')"
      />
      <van-field
        v-model="ruleForm.password"
        type="password"
        label="密码"
        placeholder="请填写密码"
        clearable
        @blur="onBlur('1')"
      />
      <van-field v-model="IntervalTime" type="tel" label="抢单间隔(s)" placeholder="请填写抢单间隔" clearable />
      <van-field name="radio" label="任务类型">
        <template #input>
          <van-radio-group v-model="type" direction="horizontal">
            <van-radio
              v-for="(option, index) in typeOptions"
              :key="index"
              :name="option.type"
              checked-color="#e4393c"
            >{{ option.label }}</van-radio>
          </van-radio-group>
        </template>
      </van-field>
    </van-form>
    <div class="popup-open__btn">
      <van-button type="warning">做单</van-button>
      <van-button type="danger" @click="onStart">{{ startFlag ? '停止接单' : '开始接单' }}</van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "NineXin",
  props: {
    index: {
      type: String,
      default: ''
    },
    item: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      ruleForm: {
        moblie: "13623239446",
        password: "123456"
      },
      IntervalTime: 3,
      type: "0",
      typeOptions: [
        { label: "精刷单", type: "0" },
        { label: "标签二天", type: "2" },
        { label: "标签三天", type: "3" },
        { label: "拼多多", type: "1" }
      ],
      token: "",
      expire: "",
      startFlag: false
    };
  },
  watch: {
    // 监听接单状态
    startFlag() {
      this.iconItems =
        this.$store.getters.iconItems.length !== 0
          ? this.$store.getters.iconItems
          : this.$storage.get("resultIcon");
      this.iconItems[this.index].opened = this.startFlag ? '已启动' : '待启动';
      this.$store.commit("SET_ICONITEMS", this.iconItems);
      this.$storage.set("resultIcon", this.iconItems);
    },
    returnContent() {
      
      if (this.returnContent.length >= 10) {
        this.returnContent = this.returnContent.filter((item, i) => i < 5);
      }
    }
  },
  methods: {
    // 失去焦点
    onBlur(index) {
      if (index === "0") {
        if (!/^1[3456789]\d{9}$/.test(this.ruleForm.moblie)) {
          this.$toast("手机号码输入有误");
          return false;
        }
      } else if (index === "1") {
        if (this.ruleForm.password === "") {
          this.$toast("密码输入有误");
          return false;
        }
      }
    },
    // 开始接单
    onStart() {
      const _this = this;
      if (!this.startFlag) {
        if (!/^1[3456789]\d{9}$/.test(this.ruleForm.moblie)) {
          this.$toast("手机号码输入有误");
          return false;
        }
        if (this.ruleForm.password === "") {
          this.$toast("密码输入有误");
          return false;
        }
        if (this.IntervalTime === "") {
          this.$toast("抢单间隔输入有误");
          return false;
        }
        // 登录
         this.returnContent = [];
        this.startFlag = true;
        this.$ajax({
          url: "http://jx.xmaylt.cc:8080/chaoshua/app/user/login",
          type: "post",
          ajaxData: {
            values: _this.ruleForm
          },
          method: function(res) {
            _this.token = res.body.data.token;
            _this.expire = res.body.data.expire;
            _this.onGrabSheet();
          }
        });
      } else {
        this.$toast({
          message: "已停止接单",
          onClose: () => {
            clearInterval(_this.timer);
            _this.startFlag = false;
          }
        });
      }
    },
    // 九鑫
    onGrabSheet() {
      const _this = this;
      clearInterval(this.timer);
      this.$ajax({
        url: "http://jx.xmaylt.cc:8080/chaoshua/app/user/task/getList",
        type: "post",
        ajaxData: {
            values: {
                orderStyle: 2,
                taskStyleMode: _this.type,
                type: "Android"
            }
        },
        headers: {
          token: _this.token
        },
        method: function(res) {
          if (!res) {
            _this.timer = setInterval(() => {
              if(_this.startFlag) {
              _this.onGrabSheet();
              }
            }, _this.IntervalTime * 1000);
          } else {
            _this.startFlag = false;
          }
        }
      });
    }
  }
};
</script>
